<style>
    .ivu-table th {
        /* 《审核失败区》表头 */
        background-color: rgba(255, 232, 134, .3);
    }
    
    .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
    .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
        /* 表格隔行 */
        background-color: rgba(255, 232, 134, .1);
    }
    
    .ivu-btn-warning {
        /* 重新审核按钮 */
        color: #fff !important;
        background-color: #f5556b;
        border-color: #f5556b !important;
    }
    
    .ivu-btn {
        /* 此页面所有按钮 */
        color: #6b68ed;
        border: 2px solid #ffe986;
    }
    
    .ivu-input {
        /* 输入框 */
        border: 2px solid #ffe986;
    }
    
    .ivu-input-search i {
        /* 搜索框的i图标 */
        color: #ffe985;
    }
</style>

<div id="check" style="background: #fff;padding: 24px;margin-bottom: 140px;">
    <i-button icon="md-done-all" @click="handleSelectAll(status)">全选</i-button>
    <i-button type="warning" @click="reaudit">重新审核</i-button>

    <!-- 搜索框 -->
    <div style="width: 300px;float: right;">
        <i-input search enter-button placeholder="姓名或证件号搜索" v-model="searchkey" />
    </div>

    <!-- 刷新 -->
    <div style="float: right;margin-right: 5px;">
        <i-button @click="getData" icon="md-refresh">刷新</i-button>
    </div>

    <Modal v-model="showModal1" title="信息与资料" width="1000" @on-ok="pass" @on-cancel="cancel">
        <div v-if="haveOptionsData.length>0">
            <i-form label-position="right" :label-width="100" :inline="true">
                <form-item label="姓名:">
                    <i-input v-model="showOneInfo.name" disabled>
                    </i-input>
                </form-item>
                <form-item label="车主身份:">
                    <i-input v-model="showOneInfo.person_type" disabled>
                    </i-input>
                </form-item>
                <form-item label="证件号:">
                    <i-input v-model="showOneInfo.certificate_id" disabled>
                    </i-input>
                </form-item>
                <form-item label="手机号:">
                    <i-input v-model="showOneInfo.phone" disabled>
                    </i-input>
                </form-item>
                <form-item label="所属单位:">
                    <i-input v-model="showOneInfo.unit" disabled>
                    </i-input>
                </form-item>
                <form-item label="电动车牌照:">
                    <i-input v-model="showOneInfo.plate" disabled>
                    </i-input>
                </form-item>
                <form-item label="所在校区:">
                    <i-input v-model="showOneInfo.campus" disabled>
                    </i-input>
                </form-item>
                <form-item label="住址:">
                    <i-input v-model="showOneInfo.room" disabled>
                    </i-input>
                </form-item>
                <form-item label="申请时间:">
                    <i-input v-model="showOneInfo.apply_time" disabled>
                    </i-input>
                </form-item>
            </i-form>
            <i-form>
                <form-item label="颁发骑行证类型:">
                    <!-- @on-change="radioChange" -->
                    <radio-group v-model="passport_type">
                        <Radio ref="radio1" label="正式">
                            <span>正式</span>
                        </Radio>
                        <Radio ref="radio2" label="临时">
                            <span>临时</span>
                        </Radio>
                    </radio-group>
                </form-item>
            </i-form>
            <div style="display: flex;justify-content: space-between;">
                <div>
                    <div>牌照证明:</div>
                    <a v-if="showOneInfo.licenseTag_path!=''" :href="showOneInfo.licenseTag_path" target="view_window">
                        <img style="width: 300px;height: auto;" :src="showOneInfo.licenseTag_path">
                    </a>
                    <a v-if="showOneInfo.licenseTag_path==''" href="images/404notFound.png" target="view_window">
                        <img style="width: 300px;height: auto;" src="images/404notFound.png">
                    </a>
                    <!-- <iframe :src="showOneInfo.licenseTag_path" frameborder="0" height="400" width="300"></iframe> -->
                </div>
                <div>
                    <div>车主身份证明:</div>
                    <a :href="showOneInfo.identification_paper_path" target="view_window"><img style="width: 300px;height: auto;" :src="showOneInfo.identification_paper_path"></a>
                    <!-- <iframe :src="showOneInfo.identification_paper_path" frameborder="0" height="400"
                        width="300"></iframe> -->
                </div>
                <div>
                    <div>车子来历证明:</div>
                    <a :href="showOneInfo.origin_evidence_path" target="view_window"><img style="width: 300px;height: auto;" :src="showOneInfo.origin_evidence_path"></a>
                    <!-- <iframe :src="showOneInfo.origin_evidence_path" frameborder="0" height="400" width="300"></iframe> -->
                </div>
            </div>
        </div>
        <Page ref="pages" :current="1" :total="this.haveOptionsData.length" :page-size="1" simple style="text-align: center;" @on-change="changePage" />

        <div slot="footer">
            <i-button type="success" :loading="modal_loading" @click="pass">通过</i-button>
            <i-button @click="cancel">取消</i-button>
        </div>
    </Modal>
    <div style="margin-top:20px">
        <i-col>
            <!-- 加载动效 -->
            <Spin fix v-if="spinShow">
                <div style="height:110px"><img class="loadImg spin-icon-load" src="images/轮.png"></div>
                <p style="color: #999999;">请求数据中</p>
            </Spin>

            <!-- 表格 -->
            <i-table height="500" stripe border ref="selection" :columns="infoColumns" :data="showinfo" @on-selection-change="whichSelect"></i-table>
        </i-col>
    </div>
</div>
<script>
    new Vue({
        el: "#check",
        data: {
            showModal1: false,
            modal_loading: false,
            status: false,
            searchkey: '',
            infoColumns: [{
                type: 'selection',
                width: 60,
                align: 'center'
            }, {
                title: '姓名',
                key: 'name',
                width: 90,
            }, {
                title: '人员类别',
                key: 'person_type',
                width: 120,
                filters: [{
                    label: '学生',
                    value: '学生'
                }, {
                    label: '教工',
                    value: '教工'
                }, {
                    label: '合同工',
                    value: '合同工'
                }],
                filterMethod(value, row) {
                    return row.person_type.indexOf(value) > -1;
                }
            }, {
                title: '证件号',
                key: 'certificate_id',
                width: 180,
            }, {
                title: '申请时间',
                key: 'apply_time',
                sortable: 'true',
                width: 200
            }, {
                title: '所属单位',
                key: 'unit'
            }, {
                title: '牌照',
                key: 'plate',
                width: 100,
            }, {
                title: '所在校区',
                key: 'campus'
            }, {
                title: '住址',
                key: 'room'
            }],
            // 根据关键字过滤后展示的数据
            showinfo: [],
            // 后端请求到的全部数据
            info: [],
            // 是否展示spin遮罩（请求数据时）
            spinShow: true,
            // 选择的记录
            haveOptionsData: [],
            // 对话框中展示的记录
            showOneInfo: {},
            // 颁发骑行证类型
            passport_type: '',
        },
        methods: {
            handleSelectAll(status) {
                this.$refs.selection.selectAll(!status);
                this.status = !status;
            },
            reaudit() {
                var that = this;
                if (that.haveOptionsData.length != 0) {
                    that.showModal1 = true;
                } else {
                    that.$Notice.warning({
                        title: '请选中至少一条记录重审',
                        duration: 1.5
                    });
                }

            },
            whichSelect(haveOptions) {
                this.haveOptionsData = haveOptions;
                console.log(this.haveOptionsData);
            },
            pass() {
                var that = this;
                that.modal_loading = true;
                if (that.passport_type == "") {
                    that.$Notice.warning({
                        title: "请选择颁发骑行证类型"
                    })
                } else {
                    console.log(that.showOneInfo._openid);
                    if (that.showOneInfo._openid == undefined) {
                        $.ajax({
                            url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/Info/pass_audit_status",
                            data: {
                                id: that.showOneInfo.id,
                                passport_type: that.passport_type,
                                passport_id: (that.passport_type == '正式') ? ('O' + that.showOneInfo
                                    .certificate_id) : ('T' + that.showOneInfo.certificate_id),
                                email: that.haveOptionsData[that.$refs['pages'].currentPage - 1].email,
                                name: that.haveOptionsData[that.$refs["pages"].currentPage - 1].name
                            },
                            type: "POST",
                            success(res) {
                                if (res.error_code == 0) {
                                    // 提示操作成功
                                    that.$Notice.success({
                                        title: res.msg
                                    });
                                    // 重置对话框分页中的页数
                                    that.$refs['pages'].currentPage = 1;
                                    // 重置颁发的骑行证值
                                    that.passport_type = '';
                                    // 从数组中去掉该数据
                                    that.haveOptionsData.splice(that.$refs['pages'].currentPage - 1, 1);
                                    // 刷新列表数据
                                    that.getData();
                                } else if (res.error_code == 1) {
                                    that.$Notice.error({
                                        title: res.msg
                                    })
                                } else if (res.error_code == 2) {
                                    that.$Notice.warning({
                                        title: res.msg
                                    })
                                } else if (res.error_code == 3) {
                                    that.$Notice.warning({
                                        title: res.msg
                                    })
                                }

                            },
                            error() {
                                that.$Notice.error({
                                    title: 'ajax请求失败',
                                })
                            }

                        })
                    } else {
                        //初始化
                        first = function(callback) {
                            var c1 = new cloud.Cloud({
                                //必填，表示是未登录模式
                                identityless: true,
                                //资源方 AppID
                                resourceAppid: 'wx9653090528b58f4d',
                                //资源方环境 ID
                                resourceEnv: 'cloud1-4gwqwv78b04dcc86',
                            })
                            c1.init()
                                //回调
                            callback(c1)
                        };
                        //回调使用完成初始化后，即可访问云数据库
                        callback = function(c1) {
                            // 发送邮件
                            $.ajax({
                                type: "POST",
                                url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/sendMail/sendPass",
                                data: {
                                    email: that.showOneInfo.email,
                                    name: that.showOneInfo.name
                                },
                                success(resp) {

                                    if (resp.error_code == 0) {
                                        const db = c1.database();
                                        db.collection('applicationform').doc(that.showOneInfo._id)
                                            .update({
                                                data: {
                                                    status: 1,
                                                    audit_time: (new Date()).toLocaleString(),
                                                    passport_id: (that.passport_type == '正式') ?
                                                        ('O' + that.showOneInfo
                                                            .certificate_id) : ('T' + that
                                                            .showOneInfo.certificate_id),
                                                    passport_type: that.passport_type
                                                },
                                                success: wxres => {
                                                    that.$Notice.success({
                                                        title: resp.msg +
                                                            ",云数据库更改成功",
                                                    })
                                                    console.log("邮件发送成功");


                                                    // 重置对话框分页中的页数
                                                    that.$refs['pages'].currentPage = 1;
                                                    // 重置颁发的骑行证值
                                                    that.passport_type = '';
                                                    // 从数组中去掉该数据
                                                    that.haveOptionsData.splice(that.$refs[
                                                        'pages'].currentPage - 1, 1);
                                                    // 刷新列表数据
                                                    that.getData();
                                                    console.log("哥，到底执行没？");
                                                },
                                                failed: wxres => {
                                                    that.$Notice.error({
                                                        title: resp.msg
                                                    })
                                                }
                                            })
                                    } else {
                                        that.$Notice.error({
                                            title: '邮件发送失败，请重新审核',
                                        })
                                        console.log("邮件发送失败");
                                    }
                                },
                                error(resp) {
                                    console.log(resp);
                                }
                            })

                        };
                        first(callback);
                    }
                }

                that.modal_loading = false;
            },
            cancel() {
                // 关闭对话框
                this.showModal1 = false;

                // 重置当前页面为第一页
                this.$refs['pages'].currentPage = 1;
                // 重置显示的数据
                this.showOneInfo = this.haveOptionsData[this.$refs['pages'].currentPage - 1];
                // 取消单选框的选择状态
                this.$refs['radio1'].currentValue = false;
                this.$refs['radio2'].currentValue = false;
            },
            disqualify() {
                this.modal_loading = true;
                this.modal_loading = false;
            },
            changePage(page) {
                // console.log(page);
                this.passport_type = '';
                this.showOneInfo = this.haveOptionsData[page - 1];
                // 取消单选框的选择状态
                this.$refs['radio1'].currentValue = false;
                this.$refs['radio2'].currentValue = false;
            },
            getData() {
                var that = this;
                // 数组[]才有splice函数，对象没有
                that.info.splice(0, that.info.length); //清空数组 
                that.spinShow = true;
                that.$Loading.start();
                $.ajax({
                    url: 'http://3v.gsdse.cn/UEBIMP/public/index.php/index/Info/select',
                    data: {
                        audit_status: -1
                    },
                    type: 'post',
                    success(res) {
                        if (res.error_code == 0) {
                            console.log(res.msg);
                            that.info = res.data;
                            console.log(that.info);
                            //初始化
                            first = function(callback) {
                                var c1 = new cloud.Cloud({
                                    //必填，表示是未登录模式
                                    identityless: true,
                                    //资源方 AppID
                                    resourceAppid: 'wx9653090528b58f4d',
                                    //资源方环境 ID
                                    resourceEnv: 'cloud1-4gwqwv78b04dcc86',
                                })
                                c1.init()
                                    //回调
                                callback(c1)
                            };
                            //回调使用完成初始化后，即可访问云数据库
                            callback = function(c1) {
                                const db = c1.database();
                                db.collection('applicationform').where({
                                    status: -1
                                }).get({
                                    success: wxres => {
                                        console.log(wxres.data);
                                        that.info = that.info.concat(wxres.data);
                                    },
                                    failed: wxres => {
                                        console.log(wxres);
                                    }
                                })
                            };
                            first(callback);
                        } else if (res.error_code == 1) {
                            console.log(res.msg);
                        } else if (res.error_code == -1) {
                            console.log(res.msg);
                        }
                    },
                    error(res) {
                        console.log('请求失败' + res)
                    },
                    complete() {
                        that.$Loading.finish();
                        that.spinShow = false
                    }
                })
            }
        },
        watch: {
            info: {
                immediate: true,
                handler(newValue, oldValue) {
                    this.showinfo = this.info;
                }
            },
            searchkey: {
                immediate: true,
                handler(newValue, oldValue) {
                    this.showinfo = this.info.filter((p) => {
                        return (p.name.indexOf(newValue) !== -1) || (p.certificate_id.indexOf(
                            newValue) !== -1);
                    })
                }
            },
            haveOptionsData: {
                handler(newValue, oldValue) {
                    var that = this;
                    console.log(that.haveOptionsData);
                    if (that.haveOptionsData.length > 0) {
                        that.showOneInfo = that.haveOptionsData[that.$refs['pages'].currentPage - 1]
                    } else {
                        that.showOneInfo = {};
                    }
                }
            },
            showOneInfo: {
                handler(newValue, oldValue) {
                    console.log(newValue);
                }
            },
            passport_type: {
                handler(newValue, oldValue) {
                    console.log(this.passport_type);
                }
            }
        },
        mounted: function() {
            this.getData();
        }
    })
</script>